<script setup>
import {defineProps} from "vue";
const {list,editClick,deleteHandle}= defineProps(['list','editClick','deleteHandle'])

// 定义每行课程的区分颜色
const tableRowClassName = ({rowIndex}) => {
  if(rowIndex % 2 === 0) {
    return 'warning-row'
  }else{
    return ''
  }
}
</script>

<template>
<div class="table">
  <el-table
      :data="list"
      :row-class-name="tableRowClassName"
      height="80vh"
  >
    <el-table-column prop="cover_img" label="图片">
      <template #default="scope">
        <img :src="scope.row.cover_img" alt="图片" class="cover_img">
      </template>
    </el-table-column>
    <el-table-column prop="title" label="标题" ></el-table-column>
    <el-table-column prop="price" label="价格" ></el-table-column>
    <el-table-column prop="point" label="评分" ></el-table-column>
    <el-table-column  label="操作" >
      <template #default="scope">
        <el-button type="primary"  @click="editClick(scope.row)">
          编辑
        </el-button>

        <el-popconfirm title="确定要删除该课程吗?" @confirm="deleteHandle(scope.row.id)">
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
    </el-table>
</div>
</template>

<style scoped lang="less">
.cover_img {
  width: 160px;
  height: 110px;
  border: 2px solid #ddd;
  border-radius: 4px;
  object-fit: cover;
}

.table {
  height: 80vh;
  width: auto;
  overflow: hidden;
  overflow-y: scroll;
}

:deep(.el-table .el-table__cell) {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333;
}
:deep(.el-table .el-table__cell:nth-child(1)) {
  font-size: 16px;
  color: #409eff;
  font-weight: bold;
}

:deep(.el-table .el-table__cell:nth-child(2)) {
  font-size: 16px;
  color: #409eff;
  font-weight: bold;
}

:deep(.el-table .el-table__cell:nth-child(3)) {
  color: #e67e22;
  font-weight: bold;
  font-size: 16px;
}
:deep(.el-table .el-table__cell:nth-child(4)) {
  font-size: 16px;
  color: #1f1f1f;
  font-weight: bold;
}
</style>